<template>
  <div style="height: 500px; overflow: auto;" v-infinite-scroll="load"
       :infinite-scroll-delay="500" :infinite-scroll-distance="200">

    <!-- 搜索框 -->
    <el-input v-model="where.name" placeholder="搜索商品名称" @input="search" style="margin-bottom: 20px; width: 300px;">
      <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
    </el-input>

    <!-- 商品卡片列表 -->
    <el-card v-for="p in tableDate" :key="p.id" style="margin-bottom: 20px;">
      <div class="product">
        <p>{{ p.id }}</p>
        <!-- 商品图片 -->
        <img :src="p.image" alt="product image" height="100px" style="object-fit: cover;">

        <!-- 商品名称 -->
        <div class="product-info">
          <h3>{{ p.name }}</h3>
          <p>价格：¥{{ p.price }}</p>
        </div>

        <!-- 查看详情按钮 -->
        <el-button type="primary" size="small" @click.stop="goToDetail(p.id)">查看详情</el-button>

        <!-- 加入购物车按钮 -->
        <el-button type="success" size="small" @click.stop="addToCart(p)">加入购物车</el-button>
      </div>
    </el-card>

    <!-- 购物车按钮 -->
    <el-button type="info" @click="viewCart" style="position: fixed; top: 20px; right: 20px;">
      购物车 ({{ cart.length }})
    </el-button>

    <!-- 购物车弹窗 -->
    <el-dialog :visible.sync="cartDialogVisible" title="购物车" width="50%">
      <el-table :data="cart" style="width: 100%">
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="removeFromCart(scope.row)" type="danger" plain>移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="dialog-footer">
        <el-button @click="cartDialogVisible = false" class="cancel-button">取消</el-button>
        <el-button type="primary" @click="checkout" class="checkout-button">结账</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'ProductView',
  data() {
    return {
      tableDate: [],
      pageObj: { page: 1, size: 10, total: 0 },
      where: { name: "", price1: null, price2: null },
      cart: [],  // 购物车数组
      cartDialogVisible: false, // 控制购物车弹窗显示
    };
  },
  methods: {
    query() {
      this.$http.get("product/news", {
        params: this.where
      }).then(res => {
        this.pageObj = res.data;
        this.tableDate = this.tableDate.concat(res.data.data);
      });
    },
    load() {
      let maxPage = Math.ceil(this.pageObj.total / this.pageObj.size);
      if (this.pageObj.page === maxPage) return;
      this.pageObj.page++;
      this.query();
    },
    search() {
      this.tableDate = [];
      this.pageObj.page = 1;
      this.query();
    },
    goToDetail(productId) {
      this.$router.push({ name: 'ProductDetail', params: { id: productId } });
    },
    addToCart(product) {
      // 检查商品是否已在购物车中
      const existingProduct = this.cart.find(item => item.id === product.id);
      if (existingProduct) {
        existingProduct.quantity += 1; // 如果商品已在购物车中，数量增加
        this.$message.success(`${product.name} 数量已增加`);
      } else {
        this.cart.push({ ...product, quantity: 1 }); // 否则新增商品
        this.$message.success(`${product.name} 已加入购物车`);
      }
      this.$emit("add-to-cart", product); // 抛出事件给父组件
    },
    removeFromCart(product) {
      const index = this.cart.findIndex(item => item.id === product.id);
      if (index !== -1) {
        this.cart.splice(index, 1); // 从购物车中移除商品
      }
    },
    viewCart() {
      this.cartDialogVisible = true; // 显示购物车弹窗
    },
    checkout() {
      if (this.cart.length === 0) {
        this.$message.warning('购物车为空，请添加商品后结账！');
        return;
      }

      // 这里可以添加支付请求逻辑，但为了模拟支付成功，我们直接显示支付成功
      this.$message.success('支付成功！感谢您的购买');

      // 结账后清空购物车
      this.cart = [];
      this.cartDialogVisible = false;
    }
  },
  created() {
    this.query();
  }
};
</script>

<style scoped>
.product {
  display: flex;
  gap: 15px;
  align-items: center;
}

.product-info {
  flex-grow: 1;
}

.product-info h3 {
  font-size: 18px;
  color: #333;
  font-weight: 500;
  margin: 0;
}

.product-info p {
  margin-top: 5px;
  color: #777;
}

.product-info p:first-child {
  font-weight: bold;
}

.el-card {
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 20px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

.el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.el-card__body {
  padding: 20px;
}

.product img {
  border-radius: 4px;
  object-fit: cover;
  width: 100px;
  height: 100px;
}

.el-button {
  margin-top: 10px;
}

.el-button-primary {
  background-color: #3498db;
  border-color: #3498db;
}

.el-button-primary:hover {
  background-color: #2980b9;
  border-color: #2980b9;
}

.el-button-success {
  background-color: #2ecc71;
  border-color: #2ecc71;
}

.el-button-success:hover {
  background-color: #27ae60;
  border-color: #27ae60;
}

.el-button--info {
  background-color: #ff6600;
  border-color: #ff6600;
  color: white;
  font-size: 16px;
}

.el-button--info:hover {
  background-color: #e65c00;
  border-color: #e65c00;
}

.el-button--info:focus {
  box-shadow: none;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.cancel-button {
  background-color: #f44336;
  color: white;
}

.cancel-button:hover {
  background-color: #d32f2f;
}

.checkout-button {
  background-color: #27ae60;
  border-color: #27ae60;
  font-size: 18px;
  padding: 10px 20px;
}

.checkout-button:hover {
  background-color: #2ecc71;
  border-color: #2ecc71;
}
</style>
